import React from 'react';
import ReactEcharts from '@/components/Echarts';
import { history } from 'umi';
import moment from 'moment';

const PostChart = props => {
    const { data = [], radioValue, companyId } = props;
    const [postData, setPostData] = React.useState([]);
    const [xAxisData, setXAxisData] = React.useState([]);
    const [yAxisData, setYAxisData] = React.useState([]);

    const getData = () => {
        const { postList = [] } = data;
        const postDataArr = [];
        const xAxisDataArr = [];
        const yAxisDataArr = [];
        postList.map(item => {
            // y轴数据处理
            yAxisDataArr.push({
                value: item.necessaryLevel,
                textStyle: { color: 'rgba(0,0,0,0.45)' }
            });
            // x轴数据处理
            item.postNeedList.map(i => {
                xAxisDataArr.push({
                    value: i.postName,
                    textStyle: { color: 'rgba(0,0,0,0.45)' }
                });
                postDataArr.push([
                    i.postName,
                    item.necessaryLevel,
                    radioValue === 'not' ? i.uncompleteNum : i.requireNum,
                    '招聘职位'
                ]);
                return '';
            });

            return '';
        });
        setPostData(postDataArr);
        setXAxisData(xAxisDataArr);
        setYAxisData(yAxisDataArr);
    };

    const handleChartClick = params => {
        history.push({
            pathname: '/office/personnelManagement/recruit/position',
            query: {
                companyId,
                startTime: moment()
                    .startOf('quarter')
                    .format('YYYY-MM-DD'),
                endTime: moment()
                    .endOf('quarter')
                    .format('YYYY-MM-DD'),
                recruitPost: params.name
            }
        });
    };
    const option = {
        legend: {
            formatter(name) {
                return `${name}   气泡大小：需求人数`;
            },
            left: 0,
            top: 0,
            textStyle: {
                color: '#8C8C8C',
                fontSize: 12
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter: params =>
                // console.log(params[0])
                `${params[0].value[2]}人`
        },
        grid: {
            top: 60,
            right: 30,
            left: 45,
            bottom: 80
        },
        xAxis: {
            data: xAxisData,
            boundaryGap: false,
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    color: 'rgba(0,0,0,0.15)',
                    width: 1,
                    type: 'solid'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    color: 'rgba(0,0,0,0.15)',
                    width: 1,
                    type: 'solid'
                }
            }
        },
        yAxis: {
            data: yAxisData,
            boundaryGap: false,
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    color: 'rgba(0,0,0,0.15)',
                    width: 1,
                    type: 'solid'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    color: 'rgba(0,0,0,0.15)',
                    width: 1,
                    type: 'solid'
                }
            }
        },
        series: [
            {
                name: '招聘职位',
                type: 'scatter',
                symbolSize(info) {
                    return Math.sqrt(info[2]) * 5;
                },
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(120, 36, 50, 0.5)',
                    shadowOffsetY: 5,
                    color: 'rgba(255, 168, 8, 0.85)'
                },
                data: postData
            }
        ],
        dataZoom: [
            {
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                start: 0,
                end: 90,
                height: 10,
                handleIcon:
                    'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                showDetail: false,
                showDataShadow: false
            }
        ]
    };
    React.useEffect(() => {
        getData();
    }, [data, radioValue]);
    return <ReactEcharts onEvents={{ click: handleChartClick }} option={option} />;
};

export default PostChart;
